<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文字波浪效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }

      .wave-text {
        font-size: 72px;
        font-weight: bold;
        color: white;
        display: flex;
        gap: 5px;
      }

      .wave-text span {
        display: inline-block;
        animation: wave 1.5s ease-in-out infinite;
      }

      .wave-text span:nth-child(1) { animation-delay: 0s; }
      .wave-text span:nth-child(2) { animation-delay: 0.1s; }
      .wave-text span:nth-child(3) { animation-delay: 0.2s; }
      .wave-text span:nth-child(4) { animation-delay: 0.3s; }
      .wave-text span:nth-child(5) { animation-delay: 0.4s; }
      .wave-text span:nth-child(6) { animation-delay: 0.5s; }
      .wave-text span:nth-child(7) { animation-delay: 0.6s; }
      .wave-text span:nth-child(8) { animation-delay: 0.7s; }
      .wave-text span:nth-child(9) { animation-delay: 0.8s; }
      .wave-text span:nth-child(10) { animation-delay: 0.9s; }
      .wave-text span:nth-child(11) { animation-delay: 1.0s; }
      .wave-text span:nth-child(12) { animation-delay: 1.1s; }

      @keyframes wave {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-30px);
        }
      }
    </style>
  </head>
  <body>
    <h1 class="wave-text">
      <span>W</span>
      <span>A</span>
      <span>V</span>
      <span>E</span>
      <span> </span>
      <span>T</span>
      <span>E</span>
      <span>X</span>
      <span>T</span>
    </h1>
  </body>
</html>

